<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="我的订单"
        left-arrow
        @click-left="$router.back()"
        >
        <template #right>
          <van-icon class="dot" name="weapp-nav" />
        </template>
      </van-nav-bar>
    </header>
    <div class="content order">
      <van-search v-model="value" shape="round" placeholder="商品名称/商品编号/订单号" />
      <van-tabs v-model="active" title-active-color="#f2270c">
        <van-tab title="全部">
          <div class="you" v-if="orderList.length">
            <div class="boxx" v-for="item in orderList" :key="item.orderId">
              <div class="top">
                <div class="icon_pop"></div>
                <div class="shopname">
                  <span>{{item.proData[0].shopName}}</span>
                  <van-icon name="arrow" />
                </div>
                <div class="state">{{getState(item.state)}}</div>
                <div class="del">
                  <div class="shu"></div>
                  <van-icon name="delete" class="shanchu" @click="del(item.orderId)" />
                </div>
              </div>
              <div class="ccon" @click="orderDetail(item.orderId)">
                <div class="center1" v-if="getlength(item.proData.length)">
                  <div class="c1">
                    <div class="cover" v-for="val in item.proData" :key="val.proId">
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="center2" v-else>
                  <div class="c2" v-for="val in item.proData" :key="val.proId">
                    <div class="cover" >
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                    <div class="tex">
                      <div class="desc">{{val.proName}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="order_total_bar">
                <div class="total_count">共{{item.proData.length}}件商品</div>
                <div class="payment">应付金额：
                  <span class="price">¥{{orderPrice(item.orderId)}}</span>
                </div>
              </div>
              <div class="bottom">
                <div class="kuang buy" v-if="item.state !== 1 ">再次购买</div>
                <div class="kuang buy zhifu" v-else>去支付</div>
              </div>
            </div>
            <div class="loaded_status">已经没有更多订单了</div>
          </div>
          <div class="wu" v-else>
            <van-empty
              class="custom-image"
              image="https://img12.360buyimg.com/img/s220x220_jfs/t1/109425/11/5810/36261/5e413d09E382bfa26/d29c1a60c5f03453.png"
              description="您暂时没有相关订单"
            />
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div class="you" v-if="orderList2.length">
            <div class="boxx" v-for="item in orderList2" :key="item.orderId">
              <div class="top">
                <div class="icon_pop"></div>
                <div class="shopname">
                  <span>{{item.proData[0].shopName}}</span>
                  <van-icon name="arrow" />
                </div>
                <div class="state">{{getState(item.state)}}</div>
                <div class="del">
                  <div class="shu"></div>
                  <van-icon name="delete" class="shanchu" @click="del(item.orderId)" />
                </div>
              </div>
              <div class="ccon" @click="orderDetail(item.orderId)">
                <div class="center1" v-if="getlength(item.proData.length)">
                  <div class="c1">
                    <div class="cover" v-for="val in item.proData" :key="val.proId">
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="center2" v-else>
                  <div class="c2" v-for="val in item.proData" :key="val.proId">
                    <div class="cover" >
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                    <div class="tex">
                      <div class="desc">{{val.proName}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="order_total_bar">
                <div class="total_count">共{{item.proData.length}}件商品</div>
                <div class="payment">应付金额：
                  <span class="price">¥{{orderPrice(item.orderId)}}</span>
                </div>
              </div>
              <div class="bottom">
                <div class="kuang buy zhifu">去支付</div>
              </div>
            </div>
            <div class="loaded_status">已经没有更多订单了</div>
          </div>
          <div class="wu" v-else>
            <van-empty
              class="custom-image"
              image="https://img12.360buyimg.com/img/s220x220_jfs/t1/109425/11/5810/36261/5e413d09E382bfa26/d29c1a60c5f03453.png"
              description="您暂时没有相关订单"
            />
          </div>
        </van-tab>
        <van-tab title="待收货">
          <div class="you" v-if="orderList3.length">
            <div class="boxx" v-for="item in orderList3" :key="item.orderId">
              <div class="top">
                <div class="icon_pop"></div>
                <div class="shopname">
                  <span>{{item.proData[0].shopName}}</span>
                  <van-icon name="arrow" />
                </div>
                <div class="state">{{getState(item.state)}}</div>
                <div class="del">
                  <div class="shu"></div>
                  <van-icon name="delete" class="shanchu" @click="del(item.orderId)" />
                </div>
              </div>
              <div class="ccon" @click="orderDetail(item.orderId)">
                <div class="center1" v-if="getlength(item.proData.length)">
                  <div class="c1">
                    <div class="cover" v-for="val in item.proData" :key="val.proId">
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="center2" v-else>
                  <div class="c2" v-for="val in item.proData" :key="val.proId">
                    <div class="cover" >
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                    <div class="tex">
                      <div class="desc">{{val.proName}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="order_total_bar">
                <div class="total_count">共{{item.proData.length}}件商品</div>
                <div class="payment">应付金额：
                  <span class="price">¥{{orderPrice(item.orderId)}}</span>
                </div>
              </div>
              <div class="bottom">
                <div class="kuang buy">再次购买</div>
              </div>
            </div>
            <div class="loaded_status">已经没有更多订单了</div>
          </div>
          <div class="wu" v-else>
            <van-empty
              class="custom-image"
              image="https://img12.360buyimg.com/img/s220x220_jfs/t1/109425/11/5810/36261/5e413d09E382bfa26/d29c1a60c5f03453.png"
              description="您暂时没有相关订单"
            />
          </div>
        </van-tab>
        <van-tab title="已完成">
          <div class="you" v-if="orderList1.length">
            <div class="boxx" v-for="item in orderList1" :key="item.orderId">
              <div class="top">
                <div class="icon_pop"></div>
                <div class="shopname">
                  <span>{{item.proData[0].shopName}}</span>
                  <van-icon name="arrow" />
                </div>
                <div class="state">{{getState(item.state)}}</div>
                <div class="del">
                  <div class="shu"></div>
                  <van-icon name="delete" class="shanchu" @click="del(item.orderId)" />
                </div>
              </div>
              <div class="ccon" @click="orderDetail(item.orderId)">
                <div class="center1" v-if="getlength(item.proData.length)">
                  <div class="c1">
                    <div class="cover" v-for="val in item.proData" :key="val.proId">
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="center2" v-else>
                  <div class="c2" v-for="val in item.proData" :key="val.proId">
                    <div class="cover" >
                      <div class="wqvue-image img">
                        <img :src="val.proImg">
                      </div>
                    </div>
                    <div class="tex">
                      <div class="desc">{{val.proName}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="order_total_bar">
                <div class="total_count">共{{item.proData.length}}件商品</div>
                <div class="payment">应付金额：
                  <span class="price">¥{{orderPrice(item.orderId)}}</span>
                </div>
              </div>
              <div class="bottom">
                <div class="kuang buy">再次购买</div>
              </div>
            </div>
            <div class="loaded_status">已经没有更多订单了</div>
          </div>
          <div class="wu" v-else>
            <van-empty
              class="custom-image"
              image="https://img12.360buyimg.com/img/s220x220_jfs/t1/109425/11/5810/36261/5e413d09E382bfa26/d29c1a60c5f03453.png"
              description="您暂时没有相关订单"
            />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Search, Tab, Tabs, Card, Empty } from 'vant'

import { getOrder } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Search)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(Empty)

export default {
  data () {
    return {
      value: '',
      active: this.$route.query.index,
      orderList1: [],
      orderList2: [],
      orderList3: [],
      orderList: []
    }
  },
  methods: {
    getlength (l) {
      if (l > 1) {
        return true
      } else {
        return false
      }
    },
    getState (s) {
      if (s === 0) {
        return '已完成'
      } else if (s === 1) {
        return '待付款'
      } else if (s === 2) {
        return '待收货'
      }
    },
    orderPrice (id) {
      // console.log(id)
      let i = 0
      this.orderList.some((val, idx) => {
        i = idx
        return val.orderId === id
      })
      return this.orderList[i].proData.reduce((prev, next) => {
        return parseFloat((prev + next.num * next.price)).toFixed(2)
      }, 0)
    },
    del (id) {
      console.log(id)
    },
    orderDetail (id) {
      console.log('去订单详情' + id)
      this.$router.push('/orderRes/' + id)
    }
  },
  mounted () {
    this.active = Number(this.$route.query.index)
    getOrder({
      userId: localStorage.getItem('userId')
    }).then(data => {
      // console.log(data.data)
      this.orderList = data.data.data
      data.data.data.forEach(val => {
        if (val.state === 1) {
          this.orderList2.push(val)
        } else if (val.state === 2) {
          this.orderList3.push(val)
        } else if (val.state === 0) {
          this.orderList1.push(val)
        }
      })
    })
  }
}
</script>

<style lang="scss">
.van-icon.van-icon-weapp-nav.dot{
  color:#000;
  font-size: 22px;
}
.van-search__content.van-search__content--round{
  background: #f7f7f7;
  font-size: 14px;
  color: #aaa;
}
.order{
  background-color: #f7f7f7;
}
.van-tab__pane{
  .boxx{
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
    background-color: #fff;
    padding:10px;
    margin: 14px;
    .top{
      font-family: PingFang-SC-Medium;
      line-height: 24px;
      display: flex;
      align-items: center;
      .icon_pop{
        background-image: url(https://wq.360buyimg.com/fd/h5/wxsq_dev/order/images/sprite_shop_icon@2x_143c33c4.png);
        background-size: 42px 20px;
        background-position: -22px 0;
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .shopname{
        flex:1;
        display: flex;
        align-items: center;
        justify-items: center;
        .van-icon.van-icon-arrow{
          color:#aaa;
        }
      }
      .state{
        font-size: 14px;
        color: #999;
      }
      .del{
        width: 35px;
        height: 21px;
        position: relative;
        .shu{
            position: absolute;
            width: 1px;
            height: 15px;
            background-color: #e3e3e3;
            top: 4px;
            left: 10px;
        }
        .shanchu{
          position: absolute;
          top: 3px;
          right: 0;
          width: 15px;
          height: 15px;
        }
      }
    }
    .c2,.c1{
      margin-top: 8px;
      display: flex;
      overflow: hidden;
      .cover{
        width: 75px;
        height: 75px;
        margin-right: 10px;
        border-radius: 6px;
        flex-shrink: 0;
        position: relative;
        display: flex;
        img{
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }
      .tex{
        color: #333;
        align-self: center;
        .desc {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333;
            line-height: 21px;
          }
      }
    }
    .order_total_bar {
        padding: 6px 0;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        .payment {
            margin-left: 10px;
            font-size: 14px;
            color: #999;
            line-height: 21px;
        }
       .total_count {
          font-size: 12px;
          color: #999;
          text-align: right;
          line-height: 21px;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
      }
      .price {
          color: #151515;
      }
    }
    .bottom{
      border-top: 1px solid #e5e5e5;
      padding-top: 10px;
      font-size: 14px;
      color: #333;
      line-height: 30px;
      flex-direction: row-reverse;
      display: flex;
      .kuang{
        text-align: center;
        width: 86px;
        height: 28px;
        line-height: 28px;
        border-radius: 15px;
        margin-left: 8px;
        flex-shrink: 0;
        position: relative;
      }
      .buy{
        color: #f2270c;
        background: #fff;
        border: 1px solid #f2270c;
        box-shadow: 0 3px 6px 0 rgba(242,39,12,.1);
      }
      .zhifu{
        background-image: linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);
        box-shadow: 0 3px 6px 0 rgba(242,39,12,.2);
        color:#fff;
      }
    }
  }
  .loaded_status {
    font-size: 14px;
    color: #999;
    line-height: 21px;
    margin: 12px 0;
    text-align: center;
  }
}
</style>
